<page-header [autoTitle]="false"></page-header>
<nz-card>
  <div style="text-align: center;margin-bottom: 20px;">
    操作说明：1、拖动图A到图B位置即交换商品A与商品B的顺序，也即为小程序首页显示的布局效果；<br/>
    2、最顶部大图为星创跳转介绍图，小程序端点击此图跳转星创小程序；<br/>
    3、除顶部三个商品可以是任一类型商品，其他商品不同类型则不能交换位置<br/>
    4、除顶部三个商品，此页面其他类型商品只显示上线状态的商品&nbsp;&nbsp;&nbsp;&nbsp;
  </div>
  <nz-spin *ngIf="isLoading" class="modal-spin"></nz-spin>
  <div class="main" *ngIf="!isLoading">
    <div style="position: relative;" title="点击修改星创介绍图" (click)="replaceImg()">
      <input type="file" id="replace-img-btn" (change)="toReplace($event)"  accept=".jpg,.png,.jpeg" style="display: none;">
      <img [src]="miniToMarketing.value" width="100%" height="314" style="cursor: pointer;" alt="首页跳转星创图">
      <div class="txt-size" style="bottom: 1px;top: unset;"><span>星创跳转介绍图，建议上传大小750*314的图片，点击图片可上传修改图片</span></div>
    </div>
    <div style="overflow: hidden;" dragsortinstruct-directive>
      <ng-container  *ngFor="let typeVo of typeVoList; let n = index;">
        <!--顶部商品样式特殊处理-->
        <!--<div class="top" *ngIf="n == 0 ">-->
          <!--<div class="top-item">-->
            <!--<ng-container *ngFor="let goods of typeVo.goodsList;let i = index;" >-->
              <!--<div style="background-color: hotpink;">-->
                <!--<img src="{{goods.mainImg}}"  (mousedown)="imgmousedown($event,typeVo,goods)"  (mouseup)="imgmouseup(typeVo,goods)" class="dsimg" alt="">-->
                <!--<div class="txt-size"><span *ngIf=" i == 0">建议上传大小338*352的商品主图</span><span *ngIf=" i != 0">建议上传大小345*173的商品主图</span></div>-->
                <!--<div class="txt" [title]="goods.title">{{goods.title | stringEllipsisCutPipe:10}}<span *ngIf="goods.status == 2" style="color: red;font-weight: 800">(商品已下线,请及时更换合适的商品)</span></div>-->
              <!--</div>-->
            <!--</ng-container>-->
          <!--</div>-->
        <!--</div>-->
        <!--其他分类商品样式-->
        <div class="recommend" *ngIf="n > 0 && typeVo.goodsList.length > 0">
          <h2><span>/</span>{{typeVo.name}}<span>/</span></h2>
          <div class="recom-xq">
            <ng-container *ngFor="let goods of typeVo.goodsList;let i = index;" >
              <section>
                <div style="position: relative;">
                  <img src="{{goods.mainImg}}" (mousedown)="imgmousedown($event,typeVo,goods)"  (mouseup)="imgmouseup(typeVo,goods)" class="dsimg">
                  <div class="txt-size" style="top: 0px;"><span>建议上传大小335*240的商品主图</span></div>
                </div>
                <p [title]="goods.title">{{goods.title | stringEllipsisCutPipe:10}}</p>
              </section>
            </ng-container>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</nz-card>
